<template>
	<view class="page">
		<u-empty-state v-if="couponsForChoose.length == 0" value="暂无相关优惠订单"></u-empty-state>
		<view v-else style="margin-top: 24rpx;">
			<view v-for="(coupon, index) in couponsForChoose" :key="index" class="coupon-wrap">
				<view class="coupon-value-wrap">
					<view class="coupon-value-text">￥{{ coupon.money }}</view>
					<view class="coupon-threshold-text">满{{ coupon.reachMoney }}可用</view>
				</view>
				<view class="coupon-info-wrap">
					<view class="coupon-name">{{ coupon.name }}</view>
					<view class="coupon-type">{{ coupon.useTypeName }}</view>
					<view class="coupon-type">{{ coupon.expireTime }}</view>
				</view>
				<view class="coupon-choose-btn" @click="chooseCoupon(coupon.id)">立即领取</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			couponsForChoose: [],
		}
	},
	onShow() {
		this.getCouponsCentreLise()
	},
	methods: {
		getCouponsCentreLise(showLoading = true) {
			this.$api.getCouponsCentreLise(showLoading).then(e => {
				const { code, result } = e
				if (code == 200) {
					this.couponsForChoose = result
					// this.couponsForChoose.push.apply(this.couponsForChoose, result)
				} else {
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				}
			})
		},
		chooseCoupon(id) {
			this.$api.getCouponsCentreCollect({ id: id }).then(e => {
				if (e.code == 200) {
					uni.showToast({
						title: '成功',
						icon: 'none'
					});
					this.getCouponsCentreLise(false)
				} else {
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				}
			})
		}
	}
}
</script>

<style lang="less">
@import './couponsCentre.less';
</style>
